<template>
  <div>
    <a-drawer
      title="详情"
      width="80%"
      placement="right"
      :visible="visible"
      @close="() => {
        this.visible = false
      }">
      <a-descriptions bordered size="small">
        <a-descriptions-item label="客户名称">
          {{ entity.CusName }}
        </a-descriptions-item>
        <a-descriptions-item label="购买方">
          {{ entity.TicketbuyerName }}
        </a-descriptions-item>
        <a-descriptions-item label="税号">
          {{ entity.TaxRegcode }}
        </a-descriptions-item>
        <a-descriptions-item label="开户行">
          {{ entity.Accbank }}
        </a-descriptions-item>
        <a-descriptions-item label="地址">
          {{ entity.CusAddress }}
        </a-descriptions-item>
        <a-descriptions-item label="说明">
          {{ entity.Memo }}
        </a-descriptions-item>
        <a-descriptions-item label="收票人">
          {{ entity.PayeeUserName }}
        </a-descriptions-item>
        <a-descriptions-item label="手机号">
          {{ entity.PayeeUserPhone }}
        </a-descriptions-item>
        <a-descriptions-item label="收票地址">
          {{ entity.PayeeUserAddres }}
        </a-descriptions-item>
        <a-descriptions-item label="价税合计">
          <a-statistic :value="entity.Amountincludingtax" :precision="2" valueStyle="font-size: 14px;" />
        </a-descriptions-item>

      </a-descriptions>

      <a-table
        ref="table"
        :scroll="{ y: 500, }"
        :columns="columns"
        :dataSource="entity.Details"
        :pagination="false"
        :loading="loadingApply"
        :bordered="true"
        size="small">
        <template slot="InvoicingAmount" slot-scope="text" >
          <a-statistic :value="text" :precision="2" valueStyle="font-size: 14px;" />
        </template>
      </a-table>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >

        <a-button type="primary" @click="inputDialogToggle(1)" :style="{ marginRight: '8px' }" >同意</a-button>
        <a-button @click="inputDialogToggle(0)" type="danger">驳回</a-button>
      </div>
      <a-modal
        title="审批意见"
        :visible="modal"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="modal=false"
      >
        <a-textarea
          v-model="Comment"
          placeholder="请输入审批意见"
          :auto-size="{ minRows: 2, maxRows: 6 }"
        />
      </a-modal>
    </a-drawer>
  </div>
</template>

<script>
export default {

  data () {
    return {
      modal: false,
      confirmLoading: false,
      visible: false,
      details: true,
      entity: { TicketbuyerName: '' },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      setTab: '1',
      data: [],
      loadingApply: false,
      columns: [{
        title: '序号',
        dataIndex: 'Id',
        customRender: (text, row, index) => {
          return index + 1
        },
        width: '45px',
        align: 'center'
      },

      { title: '货物编码', dataIndex: 'InventoryCode' },
      { title: '货物名称', dataIndex: 'InventoryName' },
      { title: '开票使用名称', dataIndex: 'InvoicingName' },
      { title: '基本售价',
        dataIndex: 'InventoryPrice',
        align: 'right',
        customRender: (text, row, index) => {
          return Number(text).toFixed(2)
        } },
      { title: '加成率',
        dataIndex: 'Markup',
        align: 'right',
        customRender: (text, row, index) => {
          return text + '%'
        } },
      { title: '开票价格',
        dataIndex: 'InvoicingPrice',
        align: 'right',
        customRender: (text, row, index) => {
          return Number(text).toFixed(2)
        } },
      { title: '数量', dataIndex: 'InvoicingQuantity', align: 'right' },
      { title: '金额',
        dataIndex: 'InvoicingAmount',
        align: 'right',
        scopedSlots: { customRender: 'InvoicingAmount' } },
      { title: '税率',
        dataIndex: 'TaxRate',
        align: 'right',
        customRender: (text, row, index) => {
          return text ? text + '%' : ''
        } },
      { title: '税额',
        dataIndex: 'TaxAmount',
        align: 'right'
      } ],
      Zhu: {},
      Comment: ''
    }
  },

  mounted () {

  },

  methods: {
    handleOk () {
      if (!this.Comment) {
        return this.$message.error('请输入审批意见后确定')
      }
      this.Zhu.Comment = this.Comment
      this.modal = false

      if (this.Zhu.ApprovalType === '开票审批') {
        this.$http.post('/InvoiceManagement/Inv_InvoiceApplyMain/ApprovalSubmission', {
          'ApplicationFormId': this.Zhu.No,
          'Id': this.Zhu.Id,
          'InstanceId': this.Zhu.InstanceId,
          'State': this.Zhu.State,
          'UserId': this.UserId,
          'TemplateId': this.Zhu.TemplateId,
          'Comment': this.Zhu.Comment
        })
          .then(res => {
            if (res.Success) {
              this.$message.success('已完成')
              this.visible = false
              this.$emit('success')
            } else {
              this.$message.error(res.Msg)
            }
          })
      }
      if (this.Zhu.ApprovalType === '退票审批') {
        this.$http.post('/InvoiceManagement/Inv_ReturnTicketMain/ApprovalSubmission', {
          'ApplicationFormId': this.Zhu.No,
          'Id': this.Zhu.Id,
          'InstanceId': this.Zhu.InstanceId,
          'State': this.Zhu.State,
          'UserId': this.UserId,
          'TemplateId': this.Zhu.TemplateId,
          'Comment': this.Zhu.Comment
        })
          .then(
            res => {
              console.log(res)
              if (res.Success) {
                this.$message.success('已完成')
                this.visible = false
                this.$emit('success')
              } else {
                this.$message.error(res.Msg)
              }
            })
      }
    },
    inputDialogToggle (e) {
      this.modal = true
      this.Comment = ''
      this.Zhu.State = e
    },
    openForm (row) {
      this.visible = true
      this.Zhu = row
      if (row.ApprovalType === '开票审批') {
        this.getDataList(row.No)
      } else {
        this.getTPlist(row.No)
      }
    },
    getTPlist (No) {
      this.$http.post('/InvoiceManagement/Inv_ReturnTicketMain/GetReturnTicketDetail?Id=' + No)
        .then(res => {
          if (res.Success) {
            this.entity = res.Data
          } else {
            this.$message.error(res.Msg)
          }
        })
    },

    getDataList (id) {
      this.$http.post('/InvoiceManagement/Inv_InvoiceApplyMain/GetInvoicingInformation?id=' + id).then(res => {
        if (res.Success) {
          this.entity = res.Data
        } else {
          this.$message.error(res.Msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-statistic-content-value-decimal {
  font-size: 14px;
}
/deep/ .ant-statistic-content-value-int{
  font-size: 14px;
}
</style>
